<template>
    <div class="hideContent" :style="`width:${styleD.W}px;left:${styleD.L}px;top:${styleD.T}px;`" @mouseenter="handleMouseEnterHide()" @mouseleave="handleMouseLeaveHide()">
        <ul class="hoverBg">
            <li class="linkItem" v-for="item in data" :key="item.id" @click="openMenu(item)">
                <a href="javascript:void(0);" :title="item.name">{{item.name}}</a>
            </li>
        </ul>
    </div>
</template>

<script>
import bus from '../../common/bus';
export default {
    name: 'hideContent',
    props:['styleD','data'],
    data () {
        return {

        };
    },
    mounted(){
        this.$nextTick(() => {
            const document = process.client ? document : {};
            const body = document.querySelector('body');
            if (body.append) {
                body.append(this.$el);
            } else {
                body.appendChild(this.$el);
            }
        });
        
    },
    methods: {
        // 鼠标移入
        handleMouseEnterHide(){
            this.$parent.changeFlag(true);
        },
        // 鼠标移除
        handleMouseLeaveHide(){
            this.$parent.changeFlag(false);
        },
        // 打开菜单
        openMenu(item){
            this.$parent.changeFlag(false);
            let menu = {
                url:item.url,
                name:item.name,
                isNew:false // 是否在新页面打开
            }; 
            bus.$emit('openMenu',menu);
        }
    },
};
</script>

<style lang="scss" scoped>
.hideContent{
    position: fixed;
    z-index: 1000;
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    .linkItem{
        height: 30px;
        line-height: 30px;
        a{
            color: #666;
            padding: 0 20px;
        }
    }
}
</style>
